<template>
  <div id="productlist" style="height:100%;">
    <div class="pltap">
      <tab custom-bar-width="70px">
        <tab-item selected @on-item-click="tabclick">综合</tab-item>
        <tab-item @on-item-click="tabclick">销量</tab-item>
        <tab-item @on-item-click="tabclick">新品</tab-item>
        <tab-item :class="scoreorder === 'asc' ? 'orderasc' : 'orderdesc'" @on-item-click="tabclick">积分</tab-item>
      </tab>
    </div>
    <div class="pltaptag">
      <scroller class="pltagli" height="-44" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom1" slot="slist1" ref="scrollerBottom1">
        <div class="plsliderlist" name="slist1">
          <cell :title="item.title" @click.native="routeto('productdetail', { id: item.id })" :border-intent="false" v-for="(item, i) in lists1" :key="i">
            <div class="plitemdesc" slot="after-title"><span class="hotcolor">{{ item.price }}</span>积分<a href="javascript:;" :class="{ 'productlist-toBuyBtn': item.stockQty === '0' || item.stockQty === '' }" @click.stop="toBuy(i, lists1)">{{item.stockQty === '0' || item.stockQty === '' ? '已兑完' : '兑换'}}</a></div>
            <img class="plitemimg" slot="icon" :src="item.img" alt="">
          </cell>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="pltagli" height="-44" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom2" slot="slist2" ref="scrollerBottom2">
        <div class="plsliderlist" name="slist2">
          <cell :title="item.title" @click.native="routeto('productdetail', { id: item.id })" :border-intent="false" v-for="(item, i) in lists2" :key="i">
            <div class="plitemdesc" slot="after-title"><span class="hotcolor">{{ item.price }}</span>积分<a href="javascript:;" :class="{ 'productlist-toBuyBtn': item.stockQty === '0' || item.stockQty === '' }" @click.stop="toBuy(i, lists2)">{{item.stockQty === '0' || item.stockQty === '' ? '已兑完' : '兑换'}}</a></div>
            <img class="plitemimg" slot="icon" :src="item.img" alt="">
          </cell>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="pltagli" height="-44" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom3" slot="slist3" ref="scrollerBottom3">
        <div class="plsliderlist" name="slist3">
          <cell :title="item.title" @click.native="routeto('productdetail', { id: item.id })" :border-intent="false" v-for="(item, i) in lists3" :key="i">
            <div class="plitemdesc" slot="after-title"><span class="hotcolor">{{ item.price }}</span>积分<a href="javascript:;" :class="{ 'productlist-toBuyBtn': item.stockQty === '0' || item.stockQty === '' }" @click.stop="toBuy(i, lists3)">{{item.stockQty === '0' || item.stockQty === '' ? '已兑完' : '兑换'}}</a></div>
            <img class="plitemimg" slot="icon" :src="item.img" alt="">
          </cell>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="pltagli" height="-44" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom4" slot="slist4" ref="scrollerBottom4">
        <div class="plsliderlist" name="slist4">
          <cell :title="item.title" @click.native="routeto('productdetail', { id: item.id })" :border-intent="false" v-for="(item, i) in lists4" :key="i">
            <div class="plitemdesc" slot="after-title"><span class="hotcolor">{{ item.price }}</span>积分<a href="javascript:;" :class="{ 'productlist-toBuyBtn': item.stockQty === '0' || item.stockQty === '' }" @click.stop="toBuy(i, lists4)">{{item.stockQty === '0' || item.stockQty === '' ? '已兑完' : '兑换'}}</a></div>
            <img class="plitemimg" slot="icon" :src="item.img" alt="">
          </cell>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
    </div>
    <loading :show="buyloadtoast" :text="'加载中...'"></loading>
    <div transfer-dom>
      <alert v-model="erralert">{{erralerttext}}</alert>
    </div>
    <confirm v-model="showconfirm"
      :content="confirmtxt"
      :close-on-confirm="false"
      @on-cancel="cancelConfirm"
      @on-confirm="okConfirm">
    </confirm>
  </div>
</template>

<script>
  import { Alert, Tab, Cell, TabItem, Badge, LoadMore, Scroller, Loading, TransferDomDirective as TransferDom, Confirm } from 'vux'

  export default {
    name: 'productlist',
    components: {
      Alert,
      Badge,
      Tab,
      Cell,
      TabItem,
      LoadMore,
      Scroller,
      Loading,
      TransferDom,
      Confirm
    },
    data () {
      return {
        isupload: false,
        isshowload: false,
        erralert: false,
        erralerttext: '',
        loadtip: '',
        scoreorder: 'desc',
        bottomCount1: 0,
        bottomCount2: 0,
        bottomCount3: 0,
        bottomCount4: 0,
        upList: [],
        lists1: [],
        lists2: [],
        lists3: [],
        lists4: [],
        ontouch: false,
        buyloadtoast: false,
        showconfirm: false,
        confirmtxt: '',
        fastarr: ''
      }
    },
    created () {
      // show all list
      this.getList(this.bottomCount1, 'all')
      .then((data) => {
        this.lists1.push.apply(this.lists1, data)
        if (data.length > 0) {
          this.bottomCount1 = this.lists1.length
        }
      }, () => {})
      // show sale list
      this.getList(this.bottomCount2, 'achievement')
      .then((data) => {
        this.lists2.push.apply(this.lists2, data)
        if (data.length > 0) {
          this.bottomCount2 = this.lists2.length
        }
      }, () => {})
      // show new list
      this.getList(this.bottomCount3, 'tamp')
      .then((data) => {
        this.lists3.push.apply(this.lists3, data)
        if (data.length > 0) {
          this.bottomCount3 = this.lists3.length
        }
      }, () => {})
      // show score list
      this.getList(this.bottomCount4, 'score')
      .then((data) => {
        this.lists4.push.apply(this.lists4, data)
        if (data.length > 0) {
          this.bottomCount4 = this.lists4.length
        }
      }, () => {})
    },
    methods: {
      tabclick (index) {
        this.swiperItemIndex = index
        const taplist = document.querySelectorAll('.pltagli')
        if (taplist.length === index + 1 && !this.ontouch) {
          this.ontouch = true
          this.scoreorder = this.scoreorder === '' ? 'asc' : ''
          this.lists4 = []
          this.bottomCount4 = 0
          this.getList(this.bottomCount4, 'score', this.scoreorder)
          .then((data) => {
            this.lists4.push.apply(this.lists4, data)
            if (data.length > 0) {
              this.bottomCount4 = this.lists4.length
            }
            this.ontouch = false
          }, () => {})
        }
        for (var i = 0; i < taplist.length; i++) {
          if (index === i) {
            taplist[i].style.display = 'block'
          } else {
            taplist[i].style.display = 'none'
          }
        }
      },
      getList (lastnumber, ordertype, reorder) {
        return this.$axios.post(this.apidomain + '/api/integralMall/queryProductInfoType/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          pageIndex: lastnumber,
          type: this.$route.query.type || '',
          ordertype: ordertype,
          reorder: reorder || ''
        })
        .then((response) => {
          return response.data.data
        })
        .catch(function (error) {
          console.log(error)
          return []
        })
      },
      onScrollBottom1 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount1, 'all')
              .then((data) => {
                this.lists1.push.apply(this.lists1, data)
                if (data.length > 0) {
                  this.bottomCount1 = this.lists1.length
                }
              }, () => {})
              this.$refs.scrollerBottom1.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom2 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount2, 'achievement')
              .then((data) => {
                this.lists2.push.apply(this.lists2, data)
                if (data.length > 0) {
                  this.bottomCount2 = this.lists2.length
                }
              }, () => {})
              this.$refs.scrollerBottom2.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom3 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount3, 'tamp')
              .then((data) => {
                this.lists3.push.apply(this.lists3, data)
                if (data.length > 0) {
                  this.bottomCount3 = this.lists3.length
                }
              }, () => {})
              this.$refs.scrollerBottom3.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom4 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount4, 'score', this.scoreorder)
              .then((data) => {
                this.lists4.push.apply(this.lists4, data)
                if (data.length > 0) {
                  this.bottomCount4 = this.lists4.length
                }
              }, () => {})
              this.$refs.scrollerBottom4.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      toBuy: function (index, list) {
        let buyinfo = list[index]
        this.fastarr = buyinfo
        if (buyinfo.stockQty !== '0' && buyinfo.stockQty !== '') {
          if (buyinfo.type === '1') {
            this.confirmtxt = '本次兑换将消耗' + 1 * buyinfo.price + '积分，兑换成功后可至兑换记录页面查看，确认兑换吗？'
            this.showconfirm = true
          } else {
            this.routeto('productdetail', {id: buyinfo.id})
          }
        }
      },
      cancelConfirm: function () {
        this.showconfirm = false
      },
      okConfirm: function () {
        this.buyloadtoast = true
        this.showconfirm = false
        let sdata = [{
          'id': this.fastarr.id,
          'num': 1,
          'weight': ''
        }]
        this.$axios.post(this.apidomain + '/api/integralMall/saveConfirmOrder/' + this.getCookie('appid'), {
          data: sdata,
          openId: this.getCookie('openid'),
          name: '',
          phone: '',
          address: '',
          province: '',
          city: '',
          district: ''
        })
        .then((response) => {
          this.buyloadtoast = false
          if (response.data.errorCode === '0') {
            window.zhuge.track('Click', {
              '事件名称': '会员中心-积分商城-商品列表-提交订单-点击',
              '商品名称': this.fastarr.title,
              '商品金额': this.fastarr.price,
              'OpenID': this.getCookie('openid'),
              '点击时间': (new Date().toLocaleString())
            }, () => {
              this.routeto('orderdetail', {id: response.data.data.id})
            })
          } else {
            this.erralerttext = response.data.errorMsg
            this.erralert = true
          }
        })
      }
    }
  }
</script>

<style lang="less">
@import '../assets/less/product/list.less';
</style>
